<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ include file="/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<%@ include file="/uilibs.jsp"%>
</head>
<body>
<div id="layout" class="mini-layout" style="width:100%;height:100%;"  borderStyle="border:solid 0px #aaa;">

<div title="用户信息" iconCls="icon-node" region="east" showSplit="true" showHeader="true" width="300" expanded="false" showSplitIcon="true">
    <div id="editPanel" class="mini-panel" style="width: 100%; height: 100%;" showToolbar="true" showHeader="false">
        <!-- 工具条处理开始 -->
        <div property="toolbar" class="mini-toolbar" style="padding: 0px; border: 0px; width: 100%;">
            <table style="width: 100%;">
                <tr>
                    <td style="width: 100%;">
                        <a id="saveBtn" name="saveBtn" class="mini-button" iconCls="icon-save" plain="true" onclick="save">保存</a>
                        <a id="cancelBtn" name="cancelBtn" class="mini-button" iconCls="icon-cancel" plain="true" onclick="cancel">取消</a>
                    </td
                </tr>
            </table>
        </div>
        <!-- 工具条处理结束 -->
        <!-- 表单区域处理 开始 -->
        <div id="editForm" class="mini-fit" style="border:0px;padding:0px;">
            <input id="id" name="id" class="mini-hidden" />
            <table style="width:100%;height:100%;">
                <tr>
                    <td style="width:70px;">角色名称:</td>
                    <td>
                        <input name="name" id="name" style="width:100%;" required="true" class="mini-textbox" value="${vo.name}"/>
                    </td>
                </tr>
                <tr>
                    <td style="width:70px;" valign="top">描述:</td>
                    <td>
                    	<input id="describe" name="describe" class="mini-textarea" value='${vo.describe}' style="width: 100%;height:70px;"/>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" valign="top" style="height:100%;">
                        <div class="mini-treegrid" url="${ctx}/system/module/list" style="border:0px;padding:0px;width:100%; height:100%;" 
                        showTreeIcon="true" treeColumn="name" expandOnLoad="true"
                        idField="id" parentField="pid" resultAsTree="false" showCheckBox="true" 
                        value="${vo.module_ids}" id="module_ids" name="module_ids" 
                        checkRecursive="false" autoCheckParent="false" onbeforenodecheck="nodecheck">
                            <div property="columns">
                                <div name="name" field="name" width="55">选择权限</div>
                                <div field="describe" width="55">权限描述</div>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
        <!-- 表单区域处理 结束 -->
    </div>
</div>

    <div title="center" region="center">
        <div class="mini-toolbar" style="border-bottom: 0; padding: 0px;">
            <table style="width: 100%;">
                <tr>
                    <td style="width: 100%;">
                        <a class="mini-button" iconCls="icon-add" onclick="add">增加</a> 
                        <a class="mini-button" iconCls="icon-edit" onclick="edit">编辑</a> 
                        <a class="mini-button" iconCls="icon-remove" onclick="remove">删除</a>
                        <span class="separator"></span>
                        <input class="mini-textbox" id="key" emptyText="角色名称" onenter="query()">
                        <a class="mini-button" iconCls="icon-find" onclick="query()">查询</a>
                    </td>
                </tr>
            </table>
        </div>
        <div class="mini-fit">
            <div id="grid" class="mini-datagrid" style="width:100%;height:100%;"
                url="${ctx}/system/common/list" idField="id" multiSelect="true"
                showEmptyText="true" emptyText="暂无记录" sizeList="[5,10,20,50]" pageSize="20" onrowdblclick="rowdblclick" onrowclick="rowclick">
                <div property="columns">
                    <div type="checkcolumn" width="5"></div>
                    <div field="name" width="20" headerAlign="center" allowSort="true">角色名称</div>
                    <div field="describe" headerAlign="center" allowSort="true">角色描述</div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
var grid = null;
var form = null;
var tree = null;

$(function(){
    mini.parse();
    form = new mini.Form("editForm");
    grid = mini.get("grid");
    tree = mini.get("module_ids");
    var params={};
    params.table="system_role";
    grid.load(params);
});

function query(){
    var v = mini.get("key").getValue();
    var params={};
    params.table="system_role";
    params.where="`name` like '%"+v+"%'";
    grid.load(params);
}

function add(){
	form.clear();
    tree.setValue("");
    mini.get("layout").updateRegion("east", { expanded: true });
}

function edit() {
    var row = grid.getSelected();
    if (row && row.id) {
        mini.get("layout").updateRegion("east", { expanded: true });
        Dao.get("system_role",row.id,function(data){
            form.setData(data);
            tree.setValue(data.module_ids);
        });
    } else {
        mini.alert("请选中一条记录!");
    }
}

function remove() {
    var ids = "";
    var rows = grid.getSelecteds();
    if(rows && rows.length > 0){
        var arr = [];
        for(var i = 0, l = rows.length; i < l; i++){
            if(!rows[i].id)continue;
            arr.push(rows[i].id);
        }
        ids = arr.join(',');
    }
    if (ids && ids.length>0) {
        if (confirm("确定删除选中记录？")) {
            grid.loading("操作中，请稍后......");
            Dao.del("system_role",ids,function(data){
                if(data){
                    mini.get("layout").updateRegion("east", { expanded: false });
                    form.clear();
                    tree.setValue("");
                    grid.reload();
                } else {
                    mini.alert("服务器异常，请稍后重试!");
                }
            });
        }
    } else {
        mini.alert("请选中一条记录");
    }
}

function save() {
    form.validate();
    var vo = {};
    vo.id = mini.get("id").getValue();
    vo.name = mini.get("name").getValue();
    vo.describe = mini.get("describe").getValue();
    vo.module_ids = mini.get("module_ids").getValue();
    if (form.isValid()) {
        console.log(vo);
        Dao.saveOrUpdate("system_role",vo,function(data){
          if(data){
            mini.get("layout").updateRegion("east", { expanded: false });
            grid.reload();
          } else {
            mini.alert("服务器繁忙，请稍后重试");
          }
        });
    }
}

function rowclick(e){
    tree.setCheckRecursive(false);
    tree.setAutoCheckParent(false);
    form.setData(e.record);
    tree.checkRecursive = false;
    tree.setValue(e.record.module_ids);
}

function rowdblclick(e){
    mini.get("layout").updateRegion("east", { expanded: true });
    Dao.get("system_role",e.record.id,function(data){
        form.setData(data);
        tree.setCheckRecursive(false);
        tree.setAutoCheckParent(false);
        tree.setValue(data.module_ids);
    });
}

function nodecheck(e){
    tree.setCheckRecursive(true);
    tree.setAutoCheckParent(true);
}

function cancel(){
    mini.get("layout").updateRegion("east", { expanded: false });
    form.clear();
    tree.setValue("");
}
</script>
</body>
</html>